<template>
  <div class="bottom">
    <ul>
      <li>
       <van-icon name="home-o" /><br />
      <router-link to="/" exact-active-class='acitve'>首页</router-link>
      </li>
      <li>
       <van-icon name="orders-o" />
        <br />
       <router-link to="/Sort"  exact-active-class='active' >分类</router-link>   
      </li>
      <li>
         <van-icon name="shopping-cart-o" /><br />
         <router-link to="/GoodsCart"  exact-active-class='active' >购物车</router-link>
      </li>
      <li>
        <van-icon name="contact" /> <br />
         <router-link to="/Mine" exact-active-class='active'>我的</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "FooterBar",
};
</script>

<style scoped>
@import url("../assets/iconfonts/iconfont.css");
.bottom {
  height: 3rem;
}
ul {
  height: 100%;
  display: flex;
  justify-content: space-around;
  /* background-color: aqua; */
  align-items: center;
  text-align: center;
}
li{
  color: black;
}
</style>